<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="24" :xs="24">
        <el-form
          ref="queryForm"
          :model="orderServiceVo"
          :inline="true"
          label-width="68px"
        >
          <el-form-item label="订单编号" prop="orderNo">
            <el-input
              v-model="orderServiceVo.orderNo"
              placeholder="请输入订单编号"
              clearable
              @keyup.enter.native="handleQueryOrder"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-refresh"
              @click="handleQueryOrder"
            >读取订单数据</el-button>
          </el-form-item>
          <el-form-item label="服务编号" prop="serviceNo">
            <el-input
              v-model="orderServiceVo.serviceNo"
              placeholder="请输入服务名称"
              clearable
              @keyup.enter.native="handleEnterService"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              :disabled="BtnDisabled"
              @click="handleEnterService"
            >录入服务</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row :gutter="10" class="mb8">
      <el-collapse v-model="activeCollapseName">
        <el-collapse-item title="订单信息" name="one">
          <el-form :model="orderInfoForm" label-width="120px">
            <el-form-item label="订单id:" hidden>{{ orderInfoForm.order.orderId }}</el-form-item>
            <el-col :span="12">
              <el-card>
                <el-col :span="64">
                  <el-form-item label="订单编号:">{{ orderInfoForm.order.orderNo}}</el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="下单时间:">{{ orderInfoForm.order.datetime}}</el-form-item>
                </el-col>
              </el-card>
            </el-col>
            <el-col :span="12">
              <el-card>
                <el-col :span="6">
                  <el-form-item label="已订购服务金额:">
                    <div class="card-panel-num1">{{ orderInfoForm.sum }}</div>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <!-- <el-form-item label="订单发型师:">
                    <div class="card-panel-num2">{{ orderInfoForm.stafferName1 }}</div>
                  </el-form-item>
                </el-col><el-col :span="6">
                  <el-form-item label="订单发型师助理:">
                    <div class="card-panel-num2">{{ orderInfoForm.stafferName2 }}</div>
                  </el-form-item> -->
                </el-col>
              </el-card>
            </el-col>
          </el-form>
        </el-collapse-item>
      </el-collapse>
    </el-row>
    <el-row :gutter="10" class="mb8">
      <el-col :span="4">
        <el-button type="danger" round icon="el-icon-delete" @click="clearAllData"> 取消订购 </el-button>
      </el-col>
      <el-col :span="4">
        <el-button type="success" round icon="el-icon-check" :disabled="BtnDisabled" @click="confirmSubmit"> 确认订购 </el-button>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="24" :xs="24">
        <el-tabs v-model="activeTabName" @tab-click="handleTabClick">
          <el-tab-pane label="订购服务" name="first">
            <el-table :data="enterServiceList">
              <el-table-column label="序号" align="center" prop="" width="55" />
              <el-table-column label="服务ID" align="center" prop="serviceId" />
              <el-table-column label="服务编号" align="center" prop="serviceNo" />
              <el-table-column label="服务名称" align="center" prop="serviceName" />
              <el-table-column label="服务价格" align="center" prop="price" />
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="已订购服务" name="second">
            <el-table :data="chosenServiceList">
              <el-table-column label="服务ID" align="center" prop="serviceId" />
              <el-table-column label="服务编号" align="center" prop="serviceNo" />
              <el-table-column label="服务名称" align="center" prop="serviceName" />
              <el-table-column label="服务价格" align="center" prop="price" />
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { enterService, getOrderInfo, confirmChoose } from '@/api/system/orderDetail'
export default {
  name: 'Choose',
  data() {
    return {
      // 遮罩层
      loading: true,
      // 订购服务按钮状态
      BtnDisabled: false,
      // 待订购服务列表
      enterServiceList: [],
      // 已订购服务列表
      chosenServiceList: [],
      // 录入服务vo
      orderServiceVo: {
        orderNo: '',
        serviceNo:''
      },
      
      // 订单及业务信息
      orderInfoForm: {
        sum: undefined,
        stafferName1: undefined,
        stafferName2: undefined,
        order: {
          orderId: undefined,
          orderNo: undefined,
          datetime: undefined
        }
      },
      // 激活的tab名称
      activeTabName: 'first',
      // 展开的折叠面板
      activeCollapseName: 'one'
    }
  },
  created() {
  },
  methods: {
    /** 查询订单信息 */
    handleQueryOrder() {
       this.loading = true;
      getOrderInfo(this.orderServiceVo).then((response) => {
        console.log(response.order)
        this.orderInfoForm.order = response.order
        this.chosenServiceList = response.order.serviceList
        this.loading = false
        // const num = this.orderInfoForm.paymentStatus
        // if (num = 1) {
        //   this.BtnDisabled = true
        // }
      })
      /**
       * this.loading = true;
      listOrder(this.queryParams).then(response => {
        this.orderList = response.rows;
        this.total = response.total;
        this.loading = false;
       */
      this.activeTabName = 'second'
    },
    /** 录入待订购服务 */
    handleEnterService() {
      this.activeTabName = 'first'
      enterService({serviceNo:this.orderServiceVo.serviceNo}).then((response) => {
        this.enterServiceList = response.order
      })
    },
    /** 切换tab */
    handleTabClick(tab, event) {
    },
    /** 确认订购 */
    confirmSubmit() {
      confirmChoose(this.orderServiceVo).then((response) => {
        const flag = response.data
        if (flag) {
          this.clearAllData()
          this.$message.success('订购成功')
        } else {
          this.$message.error('操作失败')
        }
      })
    },
    /** 清除数据 */
    clearAllData() {
      Object.assign(this.$data, this.$options.data.call(this))
    }
  }
}
</script>
<style lang="scss" scoped>
  .card-panel-num1 {    
    font-size: 30px;
    color: #40c9c6;
  }
  .card-panel-num2 {
    font-size: 40px;
    color: #eb0f0f;
  }
  .mb8 {
    margin-bottom: 8px;
  }
</style>
